<template>
	<view>
		<view class="haed-search">
			<input type="text" name="" id="" class="search" placeholder="请输书名或作者名" v-model="value" @confirm="search">
			<image src="../../static/img/shousuo.png" mode="" @tap="search"></image>
		</view>
		<view class="hot">
			<searchbook v-for="(c123, index456) in result" :searchbook="c123"></searchbook>
		</view>
	</view>
</template>

<script>
	import http from '/pages/utils/request.js'
	export default {
		data() {
			return {
				value: '',
				result:[{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},{bookImg: "https://ts1.cn.mm.bing.net/th/id/R-C.b1483e6677a8bcb5dc6b541446cb3c93?rik=YPPdnaWiqo4aPw&riu=http%3a%2f%2fpic.j9p.com%2fup%2f2020-12%2f16081737416339323.png&ehk=3X96IlkpVMr5MAnD9f4qyFg1cn3AlmbV%2bPrVnYaWJCc%3d&risl=&pid=ImgRaw&r=0",bookName: "斗破苍穹",bookAuthor:'天蚕土豆',bookIntro:"修真界人心险恶，意外穿越，奈何重生后是一弃子，身世惨淡，幸偶遇后羿射日神弓，收服九阳炉，踏平人界八方门派，重回修真界，在刀光剑影尔虞我诈中走上巅峰，任你仙道茫茫，步步艰辛"},],
			}
		},
		onLoad(options){
			this.value=options.something
			console.log(this.value);
			const parmas = {
				key:this.value
			}
			http.get("/book/search",{params:parmas}).then(res => {
				this.result=res.data
				console.log(this.result)
			}).catch(err => {
					console.log(err)
			})
		},
		methods: {
			search(){
				const parmas = {
					key:this.value
				}
				http.get("/book/search",{params:parmas}).then(res => {
					this.result=res.data
					console.log(this.result)
				}).catch(err => {
						console.log(err)
				})
			},
		}
	}
</script>

<style>
	.haed-search{
		
		width: 750rpx;
		height: 90rpx;
		background: #fff;
		border-radius: 34rpx;
		padding: 12rpx 10rpx 12rpx 32rpx;
		border: 4rpx solid white;
		/* opacity: .4; */
		background-color: beige;
		box-sizing: border-box;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-around;
	}
	.haed-search image{
		height: 60rpx;
		width: 60rpx;
		
	}
	.search{
		outline: 0;
		width: 620rpx;
		height: 64rpx;
		font-size: 26rpx;
		background: transparent;
		opacity: .8;
		
	}
</style>
